<template>
    <div style="float: right;"  >
        <a-popover v-model:open="visible" trigger="click" placement="bottom">
            <template #content>
                <list-selected
                    v-model:model-value="selectedColumns"
                    :tree="table.columns" 
                    :context="context" 
                    @check="handleColumnChange"
                ></list-selected>
            </template>
            <a-button type="primary" >
                <template #icon>
                    <SettingOutlined />
                </template>
                列选择
            </a-button>
        </a-popover>       
    </div>
    <a-table
        :columns="visibleColumns"
        :data-source="tableData"
        :pagination="pagination"
        :loading="loading"
        :scroll="{ x: 'calc(750px + 30%)', y: 'calc(100vh - 550px)'}"
        row-key="id"
        @change="handleTableChange"
        @resizeColumn="handleResizeColumn"
    >
    <template #emptyText v-if="selectedColumns.length === 0">
        <a-empty description="暂无数据" />
    </template>
   <template #bodyCell="{ column, record }" v-else>
        <template v-if="column.key === 'role'">
            <span>
                <a-tag color="cyan">{{ record.role }}</a-tag>
            </span>
      </template>
        <template v-if="column.key === 'organization'">
            <span>
                <a-tag>{{ record.organization }}</a-tag>
            </span>
      </template>
        <template v-if="column.key === 'status'">
            <span>
                <a-switch 
                v-model:checked="record.status"
                @change="onChange"
                checked-children="开启" 
                un-checked-children="关闭" />
            </span>
      </template>
      <template v-if="column.key === 'action'">
        <div style="display: flex;">
            <a-button type="link">
                <template #icon>
                    <EditOutlined />
                </template>
                <span style="margin-left: 5px;" @click="onEdit(record)">修改</span>   
            </a-button>
            <a-button danger type="link" style="display: flex; flex-direction: row-reverse;align-items: center;">
                <span style="margin-right: 5px;" @click="onDelete(record)">删除</span>
                <template #icon>
                    <DownOutlined />
                </template>
            </a-button>
        </div>
      </template>
    </template>

    </a-table>

</template>

<script lang='ts' setup>
import type { TableProps } from 'ant-design-vue';
import { computed, defineProps, ref, watch } from 'vue';
import { 
    EditOutlined,
    DownOutlined,
    SettingOutlined
} from '@ant-design/icons-vue';
import ListSelected from './ListSelected.vue';

const props = defineProps<{
    table: {
        columns: any[];
        dataSource: any[];
        pagination: any;
        loading: boolean;
        onChangeTable?: any;
        resizeColumn?: any;
        onChangeStatus?: any;
    },
    context: any
}>()

const visible = ref<boolean>(false);
const tableData = ref(props.table.dataSource)
const loading = ref(props.table.loading)
const pagination = ref(props.table.pagination)

watch(
    () => [
        props.table.dataSource,
        props.table.loading,
        props.table.pagination
    ],
    ([data, load, pag]) => {
        tableData.value = data;
        loading.value = load;
        pagination.value = pag
    }
)

const handleTableChange: TableProps['onChange'] = async (pag) =>{
    loading.value = true
    try{
        const res = await props.table.onChangeTable(pag);
        tableData.value = res.data.list;
        pagination.value.total = res.data.total
    }finally{
        loading.value = false
    }
}

function handleResizeColumn(w: any, col: { width: any; }) {   
    props.table.resizeColumn(w, col);
}

const onChange = (e: boolean) => {
    props.table.onChangeStatus(e)
}

const onEdit = (record: any) => {
    props.context.showEditModal(record)
}

const onDelete = (record: any) => {
    props.context.handleDelete(record)
}

//处理显示的列表
const selectedColumns = ref<string[]>(['account', 'name', 'role', 'phone', 'organization', 'status', 'action'])
const visibleColumns = computed(() => {
    if(selectedColumns.value.length === 0){
        return [];
    }
    return props.table.columns.filter(col => selectedColumns.value.includes(col.key))
})

//处理列变化
const handleColumnChange = (keys: string[]) => {
    if(keys.length === 0){
        tableData.value = []
    }else{
        tableData.value = props.table.dataSource
    }
    selectedColumns.value = keys;
}

</script>

<style scoped>
</style>